<template>
    <view>
        <!-- 头部导航 -->
    <header-vue :back="true" backUrl="/views/housekeep/service" bgColor="transparent"></header-vue>
      <view class="service-details">  
        
        <!-- 主图区域 -->
        <view class="main-image-section">
            <u-image 
                :src="serviceDetail.image" 
                mode="aspectFill" 
                width="100%" 
                height="640rpx"
                radius="0"
            ></u-image>
        </view>
        
        <view class="service-details-box">
            <!-- 服务保障条 -->
            <view class="service-guarantees">
                <view class="guarantee-item" v-for="(item, key) in serviceDetail.service_features" :key="key">
                    <span class="iconfont" :class="tagList[item]"></span>
                    <text>{{ item }}</text>
                </view>
                
            </view>
            <!-- 服务详情卡片 -->
            <view class="service-details-card">
                <view class="service-header">
                    <view class="title-row">
                        <view class="service-title">{{ serviceDetail.name }}</view>
                        <span class="share-icon iconfont icon-fenxiang"></span>
                    </view>
                    <view class="metrics-row">
                        <text class="engagement">已有{{ serviceDetail.sale_count }}人选择</text>
                        <text class="rating">好评率: {{ serviceDetail.positive_rate }}%</text>
                    </view>
                </view>
                        
                <!-- 服务套餐选择 -->
                <scroll-view 
                    class="service-packages" 
                    :scroll-x="true" 
                    :show-scrollbar="false" 
                    :scroll-with-animation="true"
                >
                    <view class="packages-scroll">
                        <view 
                            class="package-item"
                            v-for="(item, key) in serviceDetail.skus"
                            :key="key"
                            :class="{ 'selected': selectedPackage == item.id }"
                            @click="selectPackage(item.id)"
                        >
                            <view class="check-icon">
                                <u-icon name="checkmark" color="#FFFFFF" size="16"></u-icon>
                            </view>
                            <view class="package-content">
                                <text class="package-name">{{ item.name }}</text>
                                <view class="package-price" v-if="item.price">
                                    <text class="package-price-num">¥{{ item.price }}</text>
                                    <text class="package-price-txt">/{{ item.unit }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
            
            <!-- 选项卡区域 -->
            <view class="tabs-section">
                <view class="tabs-header">
                    <view 
                        class="tab-item" 
                        :class="{ 'active': activeTab === 'description' }"
                        @click="switchTab('description')"
                    >
                        服务说明
                        <span class="tab-item-icon iconfont icon-banyuan font40"></span>
                    </view>
                    <view 
                        class="tab-item" 
                        :class="{ 'active': activeTab === 'reviews' }"
                        @click="switchTab('reviews')"
                    >
                        用户评价
                        <span class="tab-item-icon iconfont icon-banyuan font40"></span>
                    </view>
                </view>
                
                <!-- 服务说明内容 -->
                <view class="tab-content" v-if="activeTab === 'description'">
                    <text v-if="serviceDetail.service_area" v-html="serviceDetail.service_area"></text>
                    <text class="no-data" v-else>暂无服务说明</text>
                </view>
                
                <!-- 用户评价内容 -->
                <view class="tab-content" v-if="activeTab === 'reviews'">
                    <view class="review-list">
                        <view class="review-item" v-for="review in reviewList" :key="review.id">
                            <view class="review-header">
                                <view class="review-header-box">   
                                    <image class="review-avatar" :src="review.head_img_url" mode="aspectFill" />
                                    <view class="review-user-info">
                                        <view class="review-nickname">{{ review.nick_name }}</view>
                                        <view class="review-date">{{ review.create_time }}</view>
                                    </view>
                                </view>
                                
                                <view class="review-rating">
                                    <u-rate readonly count="5" v-model="review.rating" active-color="#FA3534" inactive-color="#E7E7E7" size="16" gutter="0"></u-rate>
                                    <text class="review-tag">{{ review.rating_text }}</text>
                                </view>
                            </view>
                            <view class="review-content">{{ review.content }}</view>
                            <view class="review-images" v-if="review.images && review.images.length">
                                <image v-for="(img, idx) in review.images" :key="idx" :src="img" class="review-img" mode="aspectFill" />
                            </view>
                        </view>
                        
                        <!-- 加载状态 -->
                        <view class="loading-more" v-if="reviewLoading">
                            <text>加载中...</text>
                        </view>
                        <view class="no-more" v-if="!reviewHasMore && reviewList.length > 0">
                            <text>没有更多评价了</text>
                        </view>
                        <view class="no-data" v-if="!reviewLoading && reviewList.length === 0">
                            <text>暂无评价</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        </view>
        <fixed-footer>
            <view class="btn-con">
                <view class="kf-con">
                    <u-icon name="kefu-ermai" size="30"></u-icon>
                    <text class="kf-con-txt">联系客服</text>
                </view>
                <view class="ljgm-btn" @click="openPackagePopup">立即购买</view>
            </view>
        </fixed-footer>

        <!-- 规格弹窗 -->
        <shop-Specifications 
            :show="showPackagePopup"
            :serviceDetail="serviceDetail"
            :defaultSpecId="selectedPackage"
            :defaultQuantity="quantity"
            @confirm="onConfirmSelection"
            @close="closePackagePopup"
            @selectSpec="selectSpec"
        />
    </view>
</template>

<script>
import headerVue from '@/components/header.vue'
import fixedFooter from '@/components/fixed-footer/index.vue'
import shopSpecifications from '@/components/shop-specifications/index.vue'
import { getHousekeepServiceDetail, getHousekeepCommentList } from '@/api/index.js'
export default {
    data() {
        return {
            selectedPackage: 0, // 默认选中第一个套餐
            activeTab: 'description', // 默认显示服务说明
            serviceId: '',
            reviewList: [],
            showPackagePopup: false, // 控制套餐选择弹窗的显示
            quantity: 1, // 弹窗中选中的购买数量
            serviceDetail: {},
            // 评价分页参数
            reviewPage: 1,
            reviewLimit: 10,
            reviewLoading: false,
            reviewHasMore: true,
            tagList: this.$store.getters.tagList
        }
    },
    components: {
        headerVue,
        fixedFooter,
        shopSpecifications
    },
    onLoad(options) {
        this.serviceId = options.id
        this.getServiceDetail()
        this.getHousekeepCommentListEvent()
    },
    onReachBottom() {
        // 触底加载更多评价
        if (this.activeTab === 'reviews') {
            this.getHousekeepCommentListEvent()
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        selectPackage(packageId) {
            this.selectedPackage = packageId;
        },
        switchTab(tabName) {
            this.activeTab = tabName;
        },
        openPackagePopup() {
            this.showPackagePopup = true;
        },
        closePackagePopup() {
            this.showPackagePopup = false;
        },
        // 确认选择规格和数量
        onConfirmSelection(result) {
            // 更新页面上的选中状态
            this.selectedPackage = result.specId;
            this.quantity = result.quantity;
            
            // 将选中的规格数据保存到全局store
            if (this.$store && this.$store.commit) {
                this.$store.commit('SET_SELECTED_SPEC', {
                    id: result.specId,
                    name: result.specName,
                    price: result.productInfo.price,
                    unit: result.productInfo.unit,
                    quantity: result.quantity,
                    serviceDetail: this.serviceDetail
                })
            }
            
            if (this.serviceDetail.price_type === 1) {
                // 跳转到订单确认页面
                uni.navigateTo({
                    url: '/views/order/confirm-order?isBidding=false'
                });
            } else {
                uni.navigateTo({
                    url: '/views/order/confirm-order?isBidding=true'
                });
            }
            
        },
        selectSpec(e) {
            this.selectedPackage = e
        },
        getServiceDetail() {
            getHousekeepServiceDetail(this.serviceId).then(res => {
                if (res.errno === 0) {
                    this.serviceDetail = res.data
                    this.selectedPackage = res.data.skus[0].id
                }
            })
        },
        getHousekeepCommentListEvent() {
            if (this.reviewLoading || !this.reviewHasMore) return
            this.reviewLoading = true
            getHousekeepCommentList({
                service_id: this.serviceId,
                page: this.reviewPage,
                limit: this.reviewLimit
            }).then(res => {
                if (res.errno === 0) {
                    const list = (res.data && res.data.list) || []
                    if (this.reviewPage === 1) {
                        this.reviewList = list
                    } else {
                        this.reviewList = this.reviewList.concat(list)
                    }
                    // 是否还有更多
                    if (!list.length || list.length < this.reviewLimit) {
                        this.reviewHasMore = false
                    } else {
                        this.reviewPage += 1
                    }
                }
            }).finally(() => {
                this.reviewLoading = false
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.service-details {
    position: relative;
    background: #F6F6F6;
    padding-top: 640rpx;
    padding-bottom: 200rpx;
}

// 头部导航
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 88rpx;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    
    .back-btn {
        width: 64rpx;
        height: 64rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

// 服务保障条
.service-guarantees {
    position: absolute;
    width: 100%;
    top: 0;
    transform: translateY(-100%);
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    border-radius: 16rpx 16rpx 0 0;
    // 添加透明雾化效果
    backdrop-filter: blur(12rpx);
    background: rgba(0, 0, 0, 0.18);

    
    .guarantee-item {
        display: flex;
        align-items: center;

        span {
            color: #fff;
        }
        
        text {
            font-size: 28rpx;
            color: #FFFFFF;
            margin-left: 5rpx;
        }
    }
}

// 主图区域
.main-image-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 640rpx;
    z-index: 1;
}

.service-details-box {
    position: relative;
    z-index: 2;
    background: #F6F6F6;

}

// 服务详情卡片
.service-details-card {
    
    .service-header {
        padding:28rpx 32rpx;
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        margin-bottom: 24rpx;
        background: #FFFFFF;
        
        .title-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .service-title {
                font-size: 36rpx;
                font-weight: 600;
                color: #333333;
            }
            .share-icon {
                padding: 12rpx;
            }
        }
        .metrics-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .engagement {
                font-size: 24rpx;
                color: #666666;
            }
            .rating {
                font-size: 24rpx;
                color: #F35F5F;
            }
        }
    }
    
    
    .service-packages {
        box-sizing: border-box;
        background: transparent;
        width: 100%;
        margin-bottom: 28rpx;
        overflow: hidden;
        background: #FFFFFF;
        padding: 28rpx 0;

        .packages-scroll {
            white-space: nowrap;
        }
        
        .package-item {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-width: 200rpx;
            height: 148rpx;
            border: 2rpx solid #E5E5E5;
            border-radius: 12rpx;
            padding:0 20rpx;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #FFFCF8;
            margin-left: 20rpx;
            overflow: hidden;
            
            &.selected {
                border-color: #C87E05;
                background: #FFFCF8;

                .check-icon {
                    background: linear-gradient( 180deg, #DF9824 0%, #C87E05 100%);
                }
            }
            
            .check-icon {
                position: absolute;
                top: 0rpx;
                left: 0rpx;
                width: 40rpx;
                height: 36rpx;
                background: #E7E7E7;
                border-radius: 5rpx 0 10rpx 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .package-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                
                .package-name {
                    font-size: 28rpx;
                    color: #333333;
                    margin-bottom: 8rpx;
                }
                
                .package-price {
                    font-size: 28rpx;
                    color: #FF6B35;
                    font-weight: 600;

                    .package-price-txt {
                        font-size: 20rpx;
                    }
                }
            }
        }
    }
}

// 选项卡区域
.tabs-section {
    background: #FFFFFF;
    margin: 20rpx 0;
    overflow: hidden;
    
    .tabs-header {
        display: flex;
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 24rpx 0 0;
            font-size: 28rpx;
            color: #999999;
            position: relative;
            cursor: pointer;

            .tab-item-icon {
                display: none;
                margin-top: -10rpx;
            }
            
            &.active {
                color: #333333;
                font-weight: 600;
                
               .tab-item-icon {
                    display: block;
                    color: #25A4EF;
               }
            }
        }
    }
    
    .tab-content {
        padding: 0 32rpx 32rpx;
        text {
            font-size: 26rpx;
            color: #666666;
        }
        .no-data {
            display: block;
            width: 100%;
            box-sizing: border-box;
            font-size: 26rpx;
            color: #666666;
            text-align: center;
            padding: 20rpx 0;
        }
        .description-item {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
        }
        
        .review-list {
            .review-item {
                background: #fff;
                margin-bottom: 32rpx;
            }
            .review-header {
                margin-bottom: 12rpx;
            }
            .review-header-box {
                display: flex;
                align-items: center;
                margin-bottom: 12rpx;
            }
            .review-avatar {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
                margin-right: 16rpx;
                border: 2rpx solid #eee;
            }
            .review-user-info {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .review-nickname {
                font-size: 28rpx;
                color: #333;
                font-weight: 600;
            }
            .review-date {
                font-size: 22rpx;
                color: #aaa;
            }
            .review-rating {
                display: flex;
                align-items: center;
                margin-left: 10rpx;
            }
            .star {
                color: #eee;
                font-size: 26rpx;
                margin-right: 2rpx;
            }
            .star.filled {
                color: #F35F5F;
            }
            .review-tag {
                color: #F35F5F;
                font-size: 22rpx;
                margin-left: 8rpx;
                border-radius: 6rpx;
                padding: 0 8rpx;
            }
            .review-content {
                font-size: 26rpx;
                color: #333;
                margin-bottom: 12rpx;
            }
            .review-images {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            .review-img {
                width: 212rpx;
                height: 222rpx;
                border-radius: 8rpx;
                object-fit: cover;
                margin-bottom: 20rpx;
            }
            
            .loading-more, .no-more {
                text-align: center;
                padding: 20rpx 0;
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}

.btn-con {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .kf-con {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .kf-con-txt {
            font-size: 24rpx;
            color: #333333;
        }
    }

    .ljgm-btn {
        width: 550rpx;
        height: 76rpx;
        background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
        border-radius: 60rpx 60rpx 60rpx 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
    }
}


</style>
